<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="https://www.baidu.com">百度</a>
  <!-- 进程、消息 确定文档消息是什么？ -->
  <!-- 加载新页面，释放丢掉老页面 -->
  <form action="" method="POST">
    用户名 <input type="text" name="username" id="usernameInput">
  </form>
  <script>
    // 假设有个大表单，如果花了 10 分钟填表，断网了/跳转了页面，表单数据丢失
    // 阻止页面重新渲染 beforeunload
    var username = ''; // 如果表单没有填写
    document
      .getElementById('usernameInput')
      .addEventListener('change', function(event) {
        username = event.target.value;
        console.log(username);
      });
    window.onbeforeunload = function(event) {
      if (username) {
        return confirm('确定放弃表单提交吗?'); // 如果用户填了内容之后
      }
    }
  </script>
</body>
</html>